"use client"
import Map from "ol/Map";
import MarkerCheckbox from "./components/MarkerCheckbox";
import TrackCheckbox from "./components/TrackCheckbox";
import HeatmapCheckbox from "./components/HeatmapCheckbox";

interface Props {
  map: Map;
}

const LayersControls: React.FC<Props> = ({ map }) => {


  return (
    <>
      <article className="bg-white rounded-md py-1">
        <section className="flex justify-between p-2">
          <div className="pr-4 text-sm">案件点位</div>
          <MarkerCheckbox map={map} />
        </section>

        <section className="flex justify-between p-2">
          <div className="pr-4 text-sm">案件轨迹</div>
          <TrackCheckbox map={map} />
        </section>

        <section className="flex justify-between p-2">
          <div className="pr-4 text-sm">案件热力图</div>
          <HeatmapCheckbox map={map} />
        </section>
      </article>
    </>
  );
};

export default LayersControls;
